<template>
	<Layout :showFooter="false" :innerBottom="false" bgColor="white">
		<template #title>文章详情</template>
		<ScorllRefresher @refresh="loadData">
			<view class="inline-flex fill column article-detail">
				<view class="article-detail__title">{{detail.title}}</view>

				<view class="iflex fill aic article-detail__info">
					<image src="/static/image/other/login.png"></image>
					<view class="iflex column">
						<view class="website-name">咕法网</view>
						<view>{{dateFormat(detail.publishedTime)}} 发布</view>
					</view>
				</view>

				<view v-if="detail.nextArticleId" @click.stop="tapToNext" class="iflex fill aic article-detail__next">
					<image src="/static/image/other/msg1.png"></image>
					下一篇：{{detail.nextArticleTitle}}
				</view>

				<u-parse :html="detail.content"></u-parse>
			</view>
		</ScorllRefresher>
		<!-- 		<template #footer>
			<view class="common-footer comment">
				<uni-easyinput style="width:596rpx;" primaryColor="#FF710A" v-model="formData.commentContent"
					placeholder="写评论" @confirm="tapConfirm"></uni-easyinput>
				<image class="comment__icon" src="/static/image/other/msg.png"></image>
			</view>
		</template>
		<login-popup></login-popup> -->
	</Layout>
</template>

<script setup lang="ts">
	import Layout from '@/components/layout/layout.vue';
	import ScorllRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import { ref } from 'vue';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { dateFormat } from '@/utils/format';
	import { getArticleDetail, saveArticleComment } from '@/apis/article';
	import type { AnyObj } from '@/types/global';
	import { isResultSuccess } from '@/utils/http';
	const formData = ref({
		articleId: '',
		commentContent: ''
	});
	let articleId = '';
	const detail = ref<AnyObj>({
		articleId: '',
		title: '',
		content: '',
		createTime: '',
		nextArticleId: ''
	})


	function loadData() {
		getArticleDetail(articleId).then((result) => {
			detail.value = result.data;
		});
	}

	function tapToNext() {
		articleId = detail.value.nextArticleId;
		loadData();
	}

	function tapConfirm() {
		saveArticleComment({ ...formData.value }).then((res) => {
			if (!isResultSuccess(res, '评论成功')) return;
			formData.value.commentContent = '';
		});
	}

	onShareAppMessage(() => {
		return {
			title: detail.value.title ?? '文章详情',
			path: `/pages-other/article-detail/article-detail?articleId${articleId}`
		}
	});

	onShareTimeline(() => {
		return {
			title: detail.value.title ?? '文档详情',
			query: `articleId=${articleId}`
		}
	});

	onLoad((option) => {
		option = option as { articleId : string };
		articleId = option.articleId;
		formData.value.articleId = articleId;
		loadData();
	});
</script>

<style lang="scss">
	.comment {
		justify-content: space-between;
		align-items: center;

		.uni-easyinput__content {
			border-radius: 16rpx;
		}

		.uni-easyinput__content-input {
			background: #F2F2F2;
			border-radius: 16rpx;
		}

		&__icon {
			width: 66rpx;
			height: 66rpx;
		}
	}

	.article-detail {
		padding: 32rpx;

		&__title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #000000;
			line-height: 48rpx;
		}

		&__info {
			padding: 24rpx 0 40rpx 0;

			image {
				margin-right: 12rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.website-name {
				color: #000000;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				opacity: 0.9;
			}

			.time {
				color: #000000;
				font-size: 20rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				opacity: 0.5;
			}
		}

		&__next {
			width: 690rpx;
			padding: 20rpx;
			margin-bottom: 40rpx;
			flex-shrink: 0;
			border-radius: 12rpx;
			background: #FFEBDA;
			color: rgba(0, 0, 0, .6);
			font-size: 28rpx;
			font-weight: 400;

			image {
				margin-right: 16rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>